<template>
  <div
    :style="{
      width: `${scale * 280}px`,
      height: `${scale * 570}px`,
      padding: `${(scale - 1) * 286}px 0 0 ${(scale - 1) * 140}px`
    }"
  >
    <div class="phone_container" :style="{ transform: `scale(${scale})` }">
      <div class="phone_head" v-if="bangs">
        <div class="phone_long"></div>
        <div class="phone_circular"></div>
      </div>
      <div class="phone_box" :style="{ paddingTop: bangs ? '30px' : '0px' }" :class="bangs ? '' : 'overflow-hidden'">
        <div class="phone_cont">
          <slot></slot>
        </div>
      </div>
      <div class="m-absolute t-0 b-0 l-0 r-0 z-index-10 flex-center" v-if="toast">
        <div class="toast textfff flex-center px-10 py-2 round-4 text-size-12">{{ toast.message }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'Phone' })

const props = defineProps({
  scale: {
    default: 1,
    type: Number
  },
  bangs: {
    default: true,
    type: Boolean
  },
  src: {
    default: '',
    type: String
  }
})
const toast = ref(false)
const showToast = (param) => {
  if (typeof param === 'string' || typeof param === 'number') toast.value = { message: param }
  else if (typeof param === 'object') toast.value = { ...param }
  else return
  setTimeout(() => {
    toast.value = false
  }, toast.value.duration || 2000)
}

defineExpose({ showToast })
</script>
<style lang="scss" scoped>
.phone_container {
  width: 280px;
  height: 570px;
  color: rgba(80, 80, 80, 1);
  background-color: rgba(242, 242, 242, 1);
  border-radius: 42px;
  box-shadow: 0px 0px 29px 0px rgba(0, 0, 0, 0.5);
  position: relative;
  box-sizing: border-box;
  padding: 18px;
  .phone_head {
    width: 50%;
    height: 44px;
    background-color: rgba(242, 242, 242, 1);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 16px;
    .phone_long {
      position: absolute;
      width: 44px;
      height: 4px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(151, 151, 151, 0.6);
      border-radius: 3px;
    }
    .phone_circular {
      position: absolute;
      width: 8px;
      height: 8px;
      left: 76%;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(153, 153, 153, 1);
      border-radius: 50%;
    }
  }
  .phone_box {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 42px;
    box-sizing: border-box;
    // padding-bottom: 30px;
    .phone_cont {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-bottom-left-radius: 42px;
      border-bottom-right-radius: 42px;
      padding: 1px;
      box-sizing: border-box;
    }
  }
  .toast {
    background: rgba(0, 0, 0, 0.6);
  }
}
</style>
